<template>
  <div class="login-container">
    <div class="logo-box">
      <h2>登录</h2>
    </div>
    <div class="input-box">
      <van-field
        label="账号"
        v-model.trim="userName"
        placeholder="请输入账号"
        @keyup.native="trim('userName')"
      />
      <van-field
        label="密码"
        v-model.trim="password"
        type="password"
        placeholder="请输入密码"
        @keyup.native="trim('password')"
      />
    </div>
    <div class="login-box">
      <van-button
        class="login-button"
        block
        :loading="loading"
        loading-text="登录中..."
        @click="handleLogin"
        native-type="submit"
      >
        确定
      </van-button>
    </div>
  </div>
</template>

<script>
// import { encrypt } from "@/utils/encryp";
import { login } from "@/api";
export default {
  data() {
    return {
      userName: "",
      password: "",
      loading: false
    };
  },
  methods: {
    trim(v) {
      this[v] = this[v].replace(/\s+/g, "");
    },
    handleLogin() {
      if (this.userName === "") {
        this.$toast("请输入账号");
        return;
      }
      if (this.password === "") {
        this.$toast("请输入密码");
        return;
      }
      login({
        username: this.userName,
        password: this.password
      }).then(res => {
        if (res.code == 1) {
          this.$store.dispatch("Login", {
            access_token: res.token,
            // expires_in: 7 * 24 * 60 * 60 * 1000
            expires_in: 30 * 60 * 1000
          });
          this.$router.replace("/");
        } else {
          // this.$toast(res.msg);
          this.$notify({ type: "danger", message: res.msg });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background: linear-gradient(to bottom, #6c9adf, #aad5ad);
  .logo-box {
    margin: 0 auto;
    padding: 89px 0;
    text-align: center;
    img {
      width: 253px;
      height: 209px;
    }
    h2 {
      font-size: 44px;
      font-family: Noto Sans S Chinese;
      font-weight: 500;
      color: #fff;
      line-height: 40px;
      letter-spacing: 9px;
      margin: 80px 0 110px;
    }
  }
  .input-box {
    margin: 0 76px;
    ::v-deep .van-cell {
      padding: 0;
      margin-bottom: 40px;
      // background: #000;
      height: 83px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 14px;
      line-height: 83px;
      &::after {
        border: 0;
      }
      .van-cell__title {
        font-size: 0;
        background: url("../../assets/img/login/user.png") no-repeat;
        background-size: 100% 100%;
        width: 32px;
        height: 32px;
        margin: 26px 15px 0 22px;
        vertical-align: middle;
      }
      .van-cell__value {
        font-size: 29px;
        font-family: Noto Sans S Chinese;
        font-weight: 500;
        color: #333;
        line-height: 83px;
      }

      .van-field__control {
        color: #333;
      }
      &:last-child {
        .van-cell__title {
          background: url("../../assets/img/login/password.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .login-box {
    margin: 110px 76px 0;
    .login-button {
      height: 83px;
      background: #4f93f9;
      border-radius: 14px;
      font-size: 32px;
      font-family: Noto Sans S Chinese;
      font-weight: normal;
      color: #ffffff;
      text-align: center;
      line-height: 83px;
    }
    ::v-deep .van-button--default {
      border: none;
    }
  }
}
</style>
